<template>
  <el-dialog
    class="base-dialog"
    :custom-class="'panna-dialog_medium'"
    title="报告预览"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <div v-html="reportHtml"></div>
  </el-dialog>
</template>
<script>
export default {
  name: "ReportPreviewDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    reportHtml: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  created() { },
  methods: {
    handleClose() {
      this.$emit("update:dialogVisible", false);
      this.$emit("update:reportHtml", "");
    },
  },
};
</script>

<style lang="scss" scoped>
.base-wrapper {
  text-align: center;
}
header {
  width: 500px;
  margin: 40px auto 20px;
  .company {
    .image {
      width: 100%;
      vertical-align: middle;
      img {
        width: 80px;
      }
    }
    .image,
    h1 {
      display: inline-block;
    }
    h1 {
      font-weight: bolder;
      font-size: 18px;
    }
  }
}
p.MsoNormal {
  mso-style-name: 正文;
  mso-style-parent: "";
  margin: 0pt;
  margin-bottom: 0.0001pt;
  mso-pagination: none;
  text-align: justify;
  text-justify: inter-ideograph;
  font-family: 等线;
  mso-bidi-font-family: "Times New Roman";
  font-size: 10.5pt;
  mso-font-kerning: 1pt;
}

table.MsoNormalTable {
  mso-style-name: 普通表格;
  mso-style-parent: "";
  mso-style-noshow: yes;
  mso-tstyle-rowband-size: 0;
  mso-tstyle-colband-size: 0;
  mso-para-margin: 0pt;
  mso-para-margin-bottom: 0.0001pt;
  mso-pagination: widow-orphan;
  font-family: "Times New Roman";
  font-size: 10pt;
  mso-ansi-language: #0400;
  mso-fareast-language: #0400;
  mso-bidi-language: #0400;
  margin: 0 auto;
}
</style>
